<template>
  <div class="home">
     <!-- 轮播图 -->
    <swiper :list="imgList" loop auto dots-position="center"></swiper>
    <!-- 导航栏 -->
    <div class="nav-box">
      <div class="nav-item" v-for="(item,index) in navList" :key="index" @click="jumpTo(item.pathName)">
        <img :src="item.img" alt="">
        <p>{{item.title}}</p>
      </div>
    </div>
    <!-- 底部 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import { Swiper } from 'vux'
import Tabbar from '../components/Tabbar'
export default {
  components: {
    Swiper,
    Tabbar
  },
  data () {
    return {
      imgList: [
        { img: 'http://m.itcast.cn/images/newslide/homepageandphone/20181528141522828.jpg' },
        { img: 'http://m.itcast.cn/images/newslide/homepageandphone/20180918170957294.jpg' },
        { img: 'http://m.itcast.cn/images/newslide/homepageandphone/20184827134845878.jpg' }
      ],
      // assets下的文件会被动态加载，url-loader无法解析图片地址，所以只能用网络图，但是可以将图片当做模块加载进来
      navList: [
        { img: require('../assets/imgs/menu01.png'), title: '新闻资讯', pathName: 'newslist' },
        { img: require('../assets/imgs/menu02.png'), title: '图片分享', pathName: 'imglist' },
        { img: require('../assets/imgs/menu03.png'), title: '商品购买', pathName: 'goodslist' },
        { img: require('../assets/imgs/menu04.png'), title: '留言反馈' },
        { img: require('../assets/imgs/menu05.png'), title: '视频专区' },
        { img: require('../assets/imgs/menu06.png'), title: '联系我们' }
      ]
    }
  },
  methods: {
    jumpTo (pathName) {
      this.$router.push({ name: pathName })
    }
  }
}
</script>

<style lang="less" scoped>
.vux-img{
  height: 5rem;
}
.home {
  .swiper {
    height: 5.4667rem;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .nav-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      margin: 10px 0;
      cursor: pointer;
      p {
        font-size: 20px;
      }
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>
